<template>
  <div class="audit-list" v-if="flag">
    <div v-for="(v, i) in list" :key="i">
      <div v-for="(m, idx) in v" :key="m.id">
        <div class="node-info" v-show="m.isShow">
          <ul>
            <li>
              <p>审核时间：{{ m.createTime }}</p>
            </li>
            <li>
              <p class="autior sheng">审核人：{{ m.approverName }}</p>
            </li>
            <li>
              <p v-show="m.approverStatus == 2">
                审核状态：
                <span class="color-success">同意</span>
              </p>
              <p v-show="m.approverStatus == 3">
                审核状态：
                <span class="color-danger">驳回</span>
              </p>
            </li>
            <li>
              <p>审核人IP：{{ m.ipAddr }}</p>
            </li>
            <li
              style="float: right; margin-right: 0"
              v-if="idx == 0 && v.length > 1"
            >
              <el-button size="mini" @click="handleShow(i)"
                >历史记录
                <span class="el-icon-caret-bottom"></span>
              </el-button>
            </li>
          </ul>
        </div>
        <div class="node-content" v-show="m.isShow">
          <b class="node-content-title">审批意见 :</b>
          <div class="content-wrap" v-html="m.approverOpinion"></div>
          <div class="content-wrap" v-if="m.approverOpinion == ''"
            >暂无数据</div
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      flag: false,
    }
  },
  props: ['data'],
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.data.forEach((v) => {
        this.$set(v, 'isShow', false)
      })
      let approverIdArr = this.data.map((v) => v.approverId)
      let uniqueArr = this.unique(approverIdArr)
      for (let i = 0; i < uniqueArr.length; i++) {
        this.list[i] = this.data.filter((v) => v.approverId == uniqueArr[i])
        this.list[i][0].isShow = true
      }
      this.flag = true
    },
    handleShow(idx) {
      if (!this.list[idx].length) return
      let flags = this.list[idx][1].isShow
      this.list[idx].forEach(function (item, idx) {
        if (idx != 0) {
          item.isShow = !flags
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
.node-info {
  height: 60px;
  line-height: 60px;
  ul {
    li {
      float: left;
      margin-right: 30px;
      p.autior {
        max-width: 160px;
      }
    }
  }
}
.node-content {
  padding: 10px 20px;
  background: #f6f6f6;
  .node-content-title {
    display: inline-block;
    border-bottom: 1px solid #930b0b;
  }
  .content-wrap {
    padding-top: 10px;
    box-sizing: border-box;
  }
}
</style>